<template>
	<!--区域经济现状分析-石河子市-->
	<div class="economic-developmentarea">
        <el-row>
			<div class="return">
                <p @click="back">返回</p>
            </div>
			<el-col span="7">
				<chart-block chartID="chart1" :title="totalOutputValueOption.title" :optionData="totalOutputValueOption" chartType="getStackBar" height="25vh" titleType="blueBig" ></chart-block>
				<chart-block chartID="chart2" :title="companyNumberChangeOption.title" :optionData="companyNumberChangeOption" chartType="getBarAndLine" height="25vh" style="margin-top:2vh" titleType="blueBig" ></chart-block>
				<chart-block chartID="chart3" :title="taxReceiptsChangeOption.title" :optionData="taxReceiptsChangeOption" chartType="getPictorialBar" height="25vh" style="margin-top:2vh" titleType="blueBig" ></chart-block>
			</el-col>
			<el-col span="10">
				<p class="describe">{{toptitleText.AREA_NAME}}总规划土地面积{{toptitleText. GHTDMJ}}平方公里，
					{{toptitleText.YEAR}}年已开发面积{{toptitleText. YKFMJ}}平方公里，
					{{toptitleText.YEAR}}年实现生产总值{{toptitleText. SCZZ }}{{toptitleText.unit}};
					一产增加值{{toptitleText.DYCYZJZ}}{{toptitleText.unit}};
					二产增加值{{toptitleText.DECYZJZ}}{{toptitleText.unit}};
					三产增加值{{toptitleText.DSCYZJZ}}{{toptitleText.unit}}。
					</p>
				<bashi-map :map-data="mapData" style="height:70vh"></bashi-map>
			</el-col>
			<el-col span="7">
				<chart-block chartID="chart4" :title="aggregateInvestmentOption.title" :optionData="aggregateInvestmentOption" chartType="getShadowLine" height="25vh" titleType="blueBig" ></chart-block>
				<chart-block chartID="chart5" :title="industrialTotalChangeOption.title" :optionData="industrialTotalChangeOption" chartType="getpolarBar" height="25vh" style="margin-top:2vh" titleType="blueBig" ></chart-block>
				<chart-block chartID="chart6" :title="agricultureTotalOption.title" :optionData="agricultureTotalOption" chartType="getBar" height="25vh" style="margin-top:2vh" titleType="blueBig" ></chart-block>
            </el-col>
		</el-row>
	</div>
</template>

<script>
import {getCommonData,getCommonData10} from '@/api/pages.js'
export default {
	name: "economic-developmentarea",
	components: {
        ChartBlock: () => import('@/components/chart-block'),
		BashiMap: () => import('@/components/map/bashi-map'),
	},
	props: {},
	data() {
		return {
            totalOutputValueOption:{
                title:'',
				categoryAxis: [],
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				color: ["#01c188", "#ff6c00", "#1985ff"],
				gridTop:"22%",
			},
			totalOutputValueOptionShow:false,
            companyNumberChangeOption:{
                title:'',
				categoryAxis: [],
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				gridTop:"22%",
				LinearGradientColor:[//柱状图渐变色
					{
						topColor:'#00eac6',
						bottomColor:'#00a38a'
					},
				],
				LineCircleColor:"#ffa800",//折线图颜色
				LineCircleBorderColor:"#ffa800",//折线图描边颜色
			},
			companyNumberChangeOptionShow:false,
            taxReceiptsChangeOption:{
                title:'',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//柱状图渐变色
					{
						topColor:'#ff9600',
						bottomColor:'#58ffc2'
					},
				],
				gridTop:"22%",
			},
			taxReceiptsChangeOptionShow:false,
            aggregateInvestmentOption:{
                title:'',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				smooth:true,
				gridTop:"22%",
				LinearGradientColor:[//柱状渐变颜色
					{
						topColor:'rgba(0,213,210,0.4)',
						bottomColor:'rgba(0,213,210,0.0)',
						LineCircleColor:"#00d5d2",//折线图颜色
						LineCircleBorderColor:"#00d5d2",//折线图描边颜色
					},]
			},
			aggregateInvestmentOptionShow:false,
            industrialTotalChangeOption:{
                title:'',
				categoryAxis: [], //类目轴数据
				seriesData: [],
				topColor:'#f96779',
				bottomColor:'#19d4d3',

			},
			industrialTotalChangeOptionShow:false,
            agricultureTotalOption:{
                title:'',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor:[//柱状渐变颜色
					{
						topColor:'#ffef97',
						bottomColor:'#fe866f'
					},
					{
						topColor:'#99ffe6',
						bottomColor:'#019b8b'
					},
				],
				gridTop:"22%",
			},
			agricultureTotalOptionShow:false,
			mapData:{
				mapData:[],
				effectData:[],
				scatterData:[],
			},
			toptitleText:[],
        }
	},
	computed: {},
	created() {
	},
	mounted() {
		this.$store.commit("SET_BREAD2", '经济开发区发展现状分析');
		this.getMapData()
		this.totalChange()
		this.companyNumberChange()
		this.revenueChange()
		this.investmentChange()
		this.productionValueChange()
		this.importAndExportChange()
		this.titleText()

	},
	methods: {
		titleText(){
			getCommonData10({busiCode: 'C050',nameId:this.$route.query.nameId}).then(res => {
				if (res.data.code === 200) {
					this.toptitleText=res.data.data.list[0]
				}
			}).catch(err => {})
		},
		 //地图展示（最近一年各个区域的生产总值）
		getMapData() {
			getCommonData10({busiCode: 'C049'}).then(res => {
				if (res.data.code === 200) {
					res.data.data.list.map((item, index) => {
						this.mapData.mapData.push({
							name:item.name,
							value: item.product,
							unit: item.unit
						})
						if (item.name === '石河子市') {
							this.mapData.effectData.push({
								name: item.name,
								value: [item.longtitude, item.latitude, item.product, item.size],
								unit: item.unit
							})
						} else {
							this.mapData.scatterData.push({
								name: item.name,
								value: [item.longtitude, item.latitude, item.product, item.size],
								unit: item.unit
							})
						}
					})
				}
			}).catch(err => {
			})
		},
		//经济开发区生产总值变化(区域经济现状分析)
		totalChange(){
			getCommonData10({busiCode: 'E094'}).then(res => {
				if (res.data.code === 200) {
					this.totalOutputValueOption.title=res.data.data.title
					this.totalOutputValueOption.categoryAxis=res.data.data.categoryAxis
					this.totalOutputValueOption.seriesData=res.data.data.seriesData
					this.totalOutputValueOptionShow=true
				}
			}).catch(err => {})
		},
		//经济开发区企业数量变化(区域经济现状分析)
		companyNumberChange(){
			getCommonData10({busiCode: 'E095'}).then(res => {
				if (res.data.code === 200) {
					this.companyNumberChangeOption.title=res.data.data.title
					this.companyNumberChangeOption.categoryAxis=res.data.data.categoryAxis
					this.companyNumberChangeOption.seriesData=res.data.data.seriesData
					this.companyNumberChangeOptionShow=true
				}
			}).catch(err => {})
		},
		//经济开发区税收收入变化(区域经济现状分析)
		revenueChange(){
			getCommonData10({busiCode: 'E096'}).then(res => {
				if (res.data.code === 200) {
					this.taxReceiptsChangeOption.title=res.data.data.title
					this.taxReceiptsChangeOption.categoryAxis=res.data.data.categoryAxis
					this.taxReceiptsChangeOption.seriesData=res.data.data.seriesData
					this.taxReceiptsChangeOptionShow=true
				}
			}).catch(err => {})
		},
		//经济开发区固定资产投资总额变化(区域经济现状分析)
		investmentChange(){
			getCommonData10({busiCode: 'E097'}).then(res => {
				if (res.data.code === 200) {
					this.aggregateInvestmentOption.title=res.data.data.title
					this.aggregateInvestmentOption.categoryAxis=res.data.data.categoryAxis
					this.aggregateInvestmentOption.seriesData=res.data.data.seriesData
					this.aggregateInvestmentOptionShow=true
				}
			}).catch(err => {})
		},
		//经济开发区工业总产值变化(区域经济现状分析)
		productionValueChange(){
			getCommonData10({busiCode: 'E098'}).then(res => {
				if (res.data.code === 200) {
					this.industrialTotalChangeOption.title=res.data.data.title
					this.industrialTotalChangeOption.categoryAxis=res.data.data.categoryAxis
					this.industrialTotalChangeOption.seriesData=res.data.data.seriesData[0].data
					this.industrialTotalChangeOption.unit=res.data.data.seriesData[0].unit
					this.industrialTotalChangeOptionShow=true
				}
			}).catch(err => {})
		},
		//经济开发区工进出口变化(区域经济现状分析)
		importAndExportChange(){
			getCommonData10({busiCode: 'E099'}).then(res => {
				if (res.data.code === 200) {
					this.agricultureTotalOption.title=res.data.data.title
					this.agricultureTotalOption.categoryAxis=res.data.data.categoryAxis
					this.agricultureTotalOption.seriesData=res.data.data.seriesData
					this.agricultureTotalOptionShow=true
				}
			}).catch(err => {})
		},
		back(){
            this.$router.go(-1)
        }
    },
	watch: {}
}
</script>

<style scoped lang="scss">
.economic-developmentarea {
    padding: 0 1.5vw 0 1.5vw;
    .describe{
        padding:0 2vw;
        margin-top: -2vh;
        color: #c0efff;
		text-align: left;
		font-size: 1.15vw;
		font-family: "Microsoft YaHei";
		text-shadow: 0.2vw 0vw .3vw rgba(82,195,247,0.5),-.2vw 0vw .3vw rgba(82,195,247,0.5),0vw .2vw .3vw rgba(82,195,247,0.5),0vw -.2vw .3vw rgba(82,195,247,0.5);
    }
	.return{
        color: #03d3ff;
        display: flex;
        justify-content: flex-end;
        padding: 1.9vh 0;
        p{
            background:url("../../assets/images/return.png") top center no-repeat;
		    background-size:100% 100%;
            height: 3.7vh;
            line-height: 3.7vh;
            text-align: right;
            padding-right: 1.3vh;
            width: 4.6vw;
            cursor: pointer;
			font-size: 0.8vw;
        }
    }
}
</style>
